import { Button, Result } from 'antd'
import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router-dom'

const ErrorBoundaryPage = () => {
  const error = useRouteError()
  const navigate = useNavigate()

  const status =
    (isRouteErrorResponse(error) && error.status.toString()) || '500'
  const title = isRouteErrorResponse(error) ? error.statusText : '系统错误'
  const subTitle =
    (isRouteErrorResponse(error) && error.data?.message) ||
    (error instanceof Error ? error.message : '发生未知错误，请稍后重试。')

  return (
    <Result
      status={status as '500'}
      title={title}
      subTitle={subTitle}
      extra={
        <Button type="primary" onClick={() => navigate(-1)}>
          返回上一页
        </Button>
      }
    />
  )
}

export default ErrorBoundaryPage


